// 1. 导出一个函数
import { h, render } from "vue"
import XtxConfirm from './index.vue'
// 2. 准备一个容器 用来盛放 消息提示组件
const confirmContainer = document.createElement('div')
confirmContainer.className = 'confirmContainer'
document.body.appendChild(confirmContainer)
type paramType = { title: string, text: string }

export default function Confirm({ title, text }: paramType) {
  return new Promise((resolve, reject) => {
    // 取消
    const cancel = () => {
      // 关闭对话框
      render(null, confirmContainer)
      reject('cancel')
    }
    // 确认
    const confirm = () => {
      // 关闭对话框
      render(null, confirmContainer)
      resolve('confirm')
    }
    // 3.配合 h函数和render函数 基于 confirm组件, 生成虚拟DOM
    const VNode = h(XtxConfirm, { title, text, cancel, confirm })
    // 4.挂载到confirmContainer里面
    render(VNode, confirmContainer)
  })
}